<template>
  <div class="page-bg flex-row flex-center flex-middle">
    <div v-if="isLoading" style="text-align:center;">
      <image mode="widthFix" style="margin:100px auto;width:60px;" src="/static/loading.gif" alt=""/>
    </div>
    <div v-else class="flex-row flex-center">
      <div v-if="setting.shopNotice && movable.text" style="width:100vw;position:fixed;top:0;z-index:999">
        <zanbar
          v-on:ref="setRef" v-bind="movable"  :componentId="'movable'"></zanbar>
      </div>

      <!-- <div class="flex-item-24 flex-row">
        <div class="type-title">甄选分类</div>
        <div class="flex-column items">
          <div @click="navigateTo" v-for="(item,index) in setting.productType" :key="index" class="flex-item-12 flex-row flex-center" style="margin-bottom:10px;">
            <o-type :type="item"></o-type>
          </div>
        </div>
      </div> -->

      <div class="types">
        <div class="type-top"><div class="label">分类</div></div>
        <div class="type-content flex-column flex-item">
          <div @click="navigateTo(index)" v-for="(item,index) in setting.productType" :key="index" 
            class="flex-column flex-middle type-item" :style="{'border-width':index<2?0:'1px'}">
            <div class="flex-row flex-item">
              <div class="type-label">{{item.type}}</div><div class="type-tip">{{item.tip}}</div>
            </div>
            <image mode="aspectFill" :src="item.image" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let AV = require('leancloud-storage/live-query')
  import OType from '@/components/type.vue'
  import ZanNoticeBar from '@/components/zan/noticebar.vue'
import {checkManager} from '@/utils/wxTool'

  export default {
    data() {
      return {
        isLoading: true,
        movable: {
          text: '',
          animationData: []
        },
        user: {},
        setting:{}
      }
    },
    components: {OType, zanbar:ZanNoticeBar },
     
    methods: {
      ...ZanNoticeBar.methods,
      setNoticeText() {
        let notice1 = this.setting.shopNotice && this.setting.shopNotice[0]||'',
            notice2 = this.setting.shopNotice && this.setting.shopNotice[1]||''
        return `${notice1}「 ${notice2} 」`
      },
      setRef: function (payload) {
        setTimeout(() => {
          var that = this
          this.initZanNoticeBarScroll(that, 'movable')
        }, 500)
      },

      wxlogin() {
        return new Promise(async(resolve, reject)=> {
          let user = await AV.User.loginWithWeapp().catch(err=> console.log(err))
          this.user = user.toJSON();
          this.$store.commit('setUser',user)
          resolve()
        })
      },
      async getProductType() {
        const tips = ['人气美食','保质保量','健康人士','急速送达']
        let res = await new AV.Query('setting').first()
        this.checkManager()
        res = res.toJSON()
        res.productType.forEach((element,index) => {
          element.name = element.type
          element.img = element.image || 'https://ws4.sinaimg.cn/large/006tNc79gy1fzjynud2mhj303k03k0sh.jpg'
          element.tip = tips[index%4]
        });
        
        this.setting = res
        this.movable.text = this.setNoticeText()
        this.isLoading = false
      },
      navigateTo(index=0) {
        wx.navigateTo({
          url: '/pages/product/main?index='+index
        })
      },

      checkManager() {
        const openid = (this.$store.state.user.authData && this.$store.state.user.authData.lc_weapp.openid)
          ||(this.$store.state.user.get('authData')&&this.$store.state.user.get('authData').lc_weapp.openid)
        if (!openid) return
        let res =  AV.Cloud.run('isManager',{openid}).then(resCloud=>{
          console.log(resCloud);
          console.log(typeof(resCloud &&resCloud.data.isManager)=='boolean');
          
          if (typeof(resCloud &&resCloud.data.isManager)=='boolean') {
            console.log(resCloud.data.isManager);
            
            this.$store.commit('setIsManager',resCloud.data.isManager)
          }
        }).catch(err=>{
          console.log(err);
        })
      }
    },
    async onLoad() {
      await this.wxlogin()
      this.getProductType()
    }
  }
</script>

<style lang="less" scoped>
.types {
  box-shadow:0px 1px 10px 0px rgba(243,243,243,1);
  border-radius:15px;
  width: calc(100vw - 20*2px);
  margin: 0 auto;
  background: #fff;
  min-height: 200px;
  .type-top {
    width: 100%;
    height: 46px;
    border-bottom: 1px solid #eee;
    color: #333333;
    font-size: 19px;
    line-height: 46px;
    .label {margin-left: 30px;}
  }
  .type-content {
    padding: 10px 15px 20px;
    image {
      width: 75px;
      height: 50px;
      border-radius: 5px;
    }
    .type-label {
      max-width: 60px;overflow: hidden;
      color: #333333;font-size: 15px;
    }
    .type-tip {
      max-width: 60px;overflow: hidden;
      color: #999999;font-size: 13px;
    }
    .type-item {
      margin-bottom: 15px;
      padding-top: 10px;
      padding-right: 15px;
      border-top: 1px solid #eee;
      width: calc(50% - 15px);
    }
  }
}

.top .title {
  font-size: 18px;
  color: #222;
}
.top .subtitle {
  font-size: 16px;
  color: #444;
  margin-top: 10px;
}
.top {
  margin: 30px 0 10px;
}
.item {
  font-size: 15px;
  color: #222;
}
.item img {
    height: 50px;width: 50px;
  }
.type-title{
  font-size: 18px;
  font-weight: 900;
  color: #333;
  margin: 60px 20px 20px;
}
.items {
  padding: 0 10px;
  width: calc(100vw - 20px);
}
</style>